<template>
  <div class="w-[100%] relative flex justify-center">
    <div
      class="
                absolute
                top-6
                z-50
                mx-auto
                bg-black
                bg-opacity-70
                text-white
                px-14
                py-3
                rounded-sm
            "
      :class="errorType ? 'visible' : 'invisible'"
    >
      {{ error }}
    </div>
  </div>
</template>

<script>
export default {
  props: ['errorType'],
  data() {
    return {
      error: ''
    }
  },
  watch: {
    errorType: {
      handler(newVal) {
        if (newVal == 'caption') {
          this.error = 'Maximum 150 characters.'
        } else if (newVal == 'bio') {
          this.error = 'Maximum 80 characters.'
        } else if (newVal == 'file') {
          this.error = 'Unsupported file. Use MP4 instead.'
        } else {
          this.error = ''
        }
      }, immediate: true
    }
  }
}
</script>
